import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Input,
    Space,
    Select, message, Radio, Upload
} from 'antd'
import {Link, useSearchParams} from 'react-router-dom'
import './index.scss'
import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css'
import {useEffect, useRef, useState} from "react";
import {http} from "@/utils/request";
import {PlusOutlined} from '@ant-design/icons'
import {createArticleAPI, getArticleById, getArticleListAPI, updateArticleAPI} from "@/apis/article";

const {Option} = Select

const Publish = () => {
    // 获取频道数据
    const [channels, setChannels] = useState([])
    useEffect(() => {
        async function fetchChannels() {
            const res = await http.get('/channels');
            setChannels(res.data.channels)
        }

        fetchChannels()
    }, [])

    // 发布文章
    const onFinish = async value => {
        if (imageType !== imageList.length) {
            return message.warning('图片类型和数量不一致');
        }
        const {channel_id, content, title} = value;
        // 分类文章图片
        const formatUrl = (list) => {
            return list.map(item => {
                if (item.response) {
                    return item.response.data.url
                } else {
                    return item.url
                }
            })
        }
        const params = {
            channel_id,
            content,
            title,
            type: imageType,
            cover: {
                type: imageType,
                images: formatUrl(imageList)
            }
        }
        await http.post('/mp/articles?draft=false', params)
        if (articleId) {
            // 编辑文章
            await updateArticleAPI(params);
            message.success('更新文章成功');
        } else {
            await createArticleAPI(params);
            message.success('发布文章成功');
        }
    };

    // 图片上传
    const [imageList, setImageList] = useState([])
    const cacheImageList = useRef([])
    const onUploadChange = (info) => {
        setImageList(info.fileList)
        cacheImageList.current = info.fileList
    }

    // 控制图片type
    const [imageType, setImageType] = useState(0);
    const onTypeChange = e => {
        console.log(e);
        const type = e.target.value
        setImageType(type)
        if (type === 1) {
            const imgList = cacheImageList.current[0] ? [cacheImageList.current[0]] : [];
            setImageList(imgList);
        } else {
            setImageList(cacheImageList.current)
        }
        console.log('cacheImage = ', cacheImageList)
    };

    // 回填基础数据
    const [searchParams] = useSearchParams();
    const articleId = searchParams.get('id');
    // 回填表单数据
    const [form] = Form.useForm()
    useEffect(() => {
        console.log(articleId)

        async function getArticle() {
            const res = await getArticleById(articleId)
            form.setFieldsValue({
                ...res.data,
                type: res.data.cover.type
            })
            // 显示图片
            setImageType(res.data.cover.type)
            setImageList(res.data.cover.images.map(url => {
                return {url}
            }))
        }

        // 如果有id则拉去数据
        if (articleId) getArticle()
    }, [articleId, form]);


    return (
        <div className="publish">
            <Card
                title={
                    <Breadcrumb items={[
                        {title: <Link to={'/'}>首页</Link>},
                        {title: `${articleId ? '编辑文章' :'发布文章'}`},
                    ]}
                    />
                }
            >
                <Form
                    form={form}
                    labelCol={{span: 4}}
                    wrapperCol={{span: 16}}
                    initialValues={{type: 1}}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[{required: true, message: '请输入文章标题'}]}
                    >
                        <Input placeholder="请输入文章标题" style={{width: 400}}/>
                    </Form.Item>
                    <Form.Item
                        label="频道"
                        name="channel_id"
                        rules={[{required: true, message: '请选择文章频道'}]}
                    >
                        <Select placeholder="请选择文章频道" style={{width: 400}}>
                            {/*<Option value={0}>推荐</Option>*/}
                            {channels.map(item => (
                                <Option key={item.id} value={item.id}>
                                    {item.name}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[{required: true, message: '请输入文章内容'}]}>
                        {/*富文本编辑器*/}
                        <ReactQuill className='publish-quill' theme='snow' placeholder='请输入内容'/>
                    </Form.Item>
                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {imageType > 0 && <Upload
                            name="image"
                            listType="picture-card"
                            showUploadList
                            action={'http://geek.itheima.net/v1_0/upload'}
                            onChange={onUploadChange}
                            maxCount={imageType}
                            multiple={imageType > 1}
                            fileList={imageList}
                        >
                            <div style={{marginTop: 8}}>
                                <PlusOutlined/>
                            </div>
                        </Upload>}
                    </Form.Item>
                    <Form.Item wrapperCol={{offset: 4}}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit">
                                {articleId ? '更新文章' : '发布文章'}
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Publish